<template>
    <div v-for="item in newsList" :key="item.id">
        <img :src="item.img">
        <div id="dd">
            <p id="p1">{{item.p1}}</p>
            <p id="p2">{{item.p2}}</p>
        </div>
    </div>
</template>

<script>
import { getApi } from "@/util/api.js";
    export default {
        name: "NewsList",

        data() {
            return {
                newsList: [],
            }   ;
        },
        mounted() {
            this.getNewsList();
        },
        methods: {
            getNewsList() {
            let url = "https://d.app3c.cn/mcm/api/IndexQiangGou/";
            getApi(url).then((res) => {
                this.newsList = res.data;
                console.log(this.newsList);
            });
            },
        },
    };
</script>

<style lang="scss" scoped>
    div{
        img{
            width: 24vw;
            height: 20vw;
        }
        #dd{
            display: flex;
            text-align: center;
            padding-left: 4vw;
            #p1{
                color: #aaa;
                font-size: 3vw;
                padding-top: 0.5vw;
                text-decoration: line-through;
            }
            #p2{
                color: rgb(226, 72, 25);
                font-size: 3vw;
                font-weight: bold;
                padding-left: 2vw;
            }
        }
    }
</style>